/**
 * 〈所属模块〉
 * 〈功能描述〉
 *
 * @author Lcs
 * @date 2017/9/15 13:27
 */

import React, { Component } from "react";
import {
  StyleSheet,
  Text,
  View,
  SafeAreaView,
  ScrollView,
  DeviceEventEmitter,
  TouchableOpacity,
} from "react-native";
import { connectActionSheet } from "@expo/react-native-action-sheet";
import { connect } from "react-redux"; // 引入connect函数
import dismissKeyboard from "dismissKeyboard";

import {
  Color, ScreenWidth, FontSize, scale,
} from "../common";
import NavigatorUtil from "../utils/NavigatorUtil";
import LinkingUtil from "../utils/LinkingUtil";
import HolderImage from "../widget/common/HolderImage";
import ImageButton from "../widget/common/ImageButton";
import DataPickerRow from "../widget/common/DataPickerRow";
import MineItem from "../widget/listitem/MineItem";
import * as mineAction from "../actions/mineAction"; // 导入action方法
import { isEmpty } from "../utils/utils";
import { WXLogin } from "../utils/WeichatUtils";

@connectActionSheet
class Mine extends Component {
  constructor(props) {
    super(props);
    this.state = { test: "" };
  }

  componentWillMount() {
    const { props } = this;
    global.hasLoggedin && props.dispatch(mineAction.getUserInfo());
  }

  componentDidMount() {
    const { props } = this;
    this.updateListener = DeviceEventEmitter.addListener("WEICHATLOGINSUCCESS", userinfo => {
      props.dispatch(mineAction.getUserInfo());
    });
    this.logoutListener = DeviceEventEmitter.addListener("LOGOUT", user => {
      props.dispatch(mineAction.logout());
    });
    this.bindMobileListener = DeviceEventEmitter.addListener("BINDMOBILESUCCESS", mobile => {
      props.dispatch(mineAction.getUserInfo());
    });
  }

  // componentWillReceiveProps(nextProps) {
  //   const { mineReducer } = nextProps;
  //   if (mineReducer != null) {
  //     const { storeInfo, storeInfoDone } = mineReducer;
  //     if (storeInfoDone === true) {
  //       NavigatorUtil.goStoreAddress(storeInfo.platform_address);
  //     }
  //   }
  // }

  handleCall() {
    const { props } = this;
    const options = ["呼叫", "取消"];
    const cancelButtonIndex = options.length - 1;
    const phoneNumber = "4000001787";
    props.showActionSheetWithOptions(
      {
        options,
        cancelButtonIndex,
        message: phoneNumber,
      },
      buttonIndex => {
        if (buttonIndex === 0) {
          LinkingUtil.callPhone(phoneNumber);
        }
      },
    );
  }

  renderHeader() {
    const { mineReducer } = this.props;
    const { hasLoggedin, userInfo } = mineReducer;
    const header = isEmpty(userInfo.header_src) || !hasLoggedin ? require("../img/ic_user.png") : { uri: userInfo.header_src };
    const nickname = !hasLoggedin ? "点击登录" : isEmpty(userInfo.nickname) ? "昵称" : userInfo.nickname;
    return (
      <View style={styles.headerConatiner}>
        <View style={styles.userHeaderConatiner}>
          <TouchableOpacity onPress={this.WXLogin} activeOpacity={1.0} style={styles.headerTouchContainer}>
            <HolderImage style={styles.imageHeader} source={header} />
            <Text style={styles.textUserName}>{nickname}</Text>
          </TouchableOpacity>
        </View>
        <View style={styles.orderConatiner}>
          <Text style={styles.subTitle}>我的订单</Text>
          <View style={styles.spaceBetween}>
            <ImageButton
              source={require("../img/ic_order_service.png")}
              text="维修订单"
              style={styles.flex}
              imgHeight={scale * 24}
              imgWidth={scale * 24}
              itMargin={scale * 8}
              onPress={() => NavigatorUtil.goServiceOrderList()}
            />
            <ImageButton
              source={require("../img/ic_memory_service.png")}
              text="内存订单"
              style={styles.flex}
              imgHeight={scale * 24}
              imgWidth={scale * 24}
              itMargin={scale * 8}
              onPress={() => NavigatorUtil.goUpdateOrderList()}
            />
            <ImageButton
              source={require("../img/ic_recycle_service.png")}
              text="回收订单"
              style={styles.flex}
              imgHeight={scale * 24}
              imgWidth={scale * 24}
              itMargin={scale * 8}
              onPress={() => NavigatorUtil.goRecycleOrderList()}
            />
          </View>
        </View>
      </View>
    );
  }

  handleGetStoreAddress = () => {
    const { props } = this;
    if (global.hasLoggedin) {
      props.dispatch(
        mineAction.getStoreLocation(address => {
          NavigatorUtil.goStoreAddress(address);
        }),
      );
    } else {
      WXLogin().then(this.handleGetStoreAddress);
    }
  };

  WXLogin = () => {
    WXLogin();
  };

  render() {
    const { mineReducer } = this.props;
    const { test } = this.state;
    const { storeInfo, userInfo } = mineReducer;
    return (
      <SafeAreaView style={styles.container}>
        <ScrollView style={styles.container} bounces={false}>
          <TouchableOpacity style={styles.container} onPress={() => dismissKeyboard()}>
            <View>
              {this.renderHeader()}
              <MineItem
                onPress={this.handleGetStoreAddress}
                title="门店地址"
                desc="服务时间：9:00-18:00"
                label={require("../img/ic_store_location2.png")}
              />
              {false && (
                <MineItem
                  onPress={() => {}}
                  title="在线客服"
                  desc="服务时间：9:00-18:00"
                  label={require("../img/ic_service_online.png")}
                  marginTop={scale * 8}
                />
              )}
              <MineItem
                title="联系电话"
                desc="400-8120-3891"
                label={require("../img/ic_service_phone.png")}
                onPress={() => this.handleCall()}
                marginTop={scale * 8}
              />
              <MineItem
                onPress={() => NavigatorUtil.goHelpCenter()}
                title="帮助中心"
                label={require("../img/ic_help.png")}
              />
              <MineItem
                onPress={() => NavigatorUtil.goSuggest()}
                title="意见反馈"
                label={require("../img/ic_suggest.png")}
                marginTop={scale * 8}
              />
              <MineItem
                onPress={() => NavigatorUtil.goAboutUs()}
                title="关于我们"
                label={require("../img/ic_aboutus.png")}
              />
              <MineItem
                onPress={() => NavigatorUtil.goSetting(userInfo)}
                title="设置"
                label={require("../img/ic_setting.png")}
                marginTop={scale * 8}
              />
              {false && (
                <MineItem
                  onPress={() => NavigatorUtil.logOut()}
                  title="退出登录"
                  label={require("../img/ic_setting.png")}
                  marginTop={scale * 8}
                />
              )}
              {false && (
                <MineItem
                  onPress={this.WXLogin}
                  title="微信登录测试"
                  label={require("../img/ic_setting.png")}
                  marginTop={scale * 8}
                />
              )}
            </View>
          </TouchableOpacity>
        </ScrollView>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Color.background_native,
  },
  spaceBetween: {
    flex: 1,
    paddingHorizontal: scale * 45,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  },
  headerConatiner: {
    height: scale * 256,
    width: ScreenWidth,
    alignItems: "center",
    backgroundColor: Color.white,
  },
  userHeaderConatiner: {
    height: scale * 132,
    width: ScreenWidth,
    alignItems: "center",
    paddingTop: 20 * scale,
    backgroundColor: Color.tab_yellow,
  },
  headerTouchContainer: {
    alignItems: "center",
  },
  imageHeader: {
    height: scale * 48,
    width: scale * 48,
    backgroundColor: Color.red,
    borderRadius: scale * 24,
    borderColor: Color.white,
    borderWidth: 1,
  },
  textUserName: {
    color: Color.white,
    fontSize: FontSize.SIZE_14,
    marginTop: scale * 8,
  },
  orderConatiner: {
    width: ScreenWidth - scale * 32,
    height: 120,
    position: "absolute",
    bottom: scale * 24,
    borderRadius: scale * 5,
    elevation: 2,
    shadowOffset: { height: 1 },
    shadowColor: Color.black,
    shadowOpacity: 0.1,
    backgroundColor: Color.white,
  },
  subTitle: {
    fontSize: FontSize.SIZE_17,
    color: Color.text_title,
    fontWeight: "bold",
    marginLeft: scale * 18,
    marginTop: scale * 16,
    marginBottom: scale * 15,
  },
  text_copyright: {
    fontSize: FontSize.SIZE_12,
    color: Color.text_title,
    marginTop: scale * 32,
    alignSelf: "center",
    marginBottom: scale * 32,
  },
});

const reducers = state => {
  return {
    mineReducer: state.mineReducer,
  };
};

export default connect(reducers)(Mine);
